﻿
jQuery(function () {
    var $ = jQuery,
        $list = $('#fileList'),
        $filePicker = $("#filePicker"),
        $listSend = $('#fileListSend'),
        $filePickerSend = $("#filePickerSend"),
        $oneOnly = $("#oneOnly"),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

        // 缩略图大小
        thumbnailWidth = 80 * ratio,
        thumbnailHeight = 80 * ratio,

        // Web Uploader实例
        uploader,
        uploaderSend;
    // 初始化Web Uploader
    uploader = WebUploader.create({
        // 自动上传。
        auto: true,

        // swf文件路径
        swf: '/Scripts/Crop/js/Uploader.swf',

        // 文件数量限制
        fileNumLimit:9,
        // 文件接收服务端。
        server: '/file/UploadFile',
        fileSizeLimit:5 * 9 * 1024 * 1024,
        fileSingleSizeLimit: 5 * 1024 * 1024,

        duplicate:false,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择文件，可选。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploaderSend = WebUploader.create({
        // 自动上传。
        auto: true,

        // swf文件路径
        swf: '/Scripts/Crop/js/Uploader.swf',

        // 文件数量限制
        fileNumLimit: 9,
        // 文件接收服务端。
        server: '/file/UploadFile',
        fileSizeLimit: 5 * 9 * 1024 * 1024,
        fileSingleSizeLimit: 5 * 1024 * 1024,

        duplicate: false,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePickerSend',

        // 只允许选择文件，可选。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    
    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
        
        var count = $list.find('li').length - 1;
        if (count === 9) {
            return;
        }
        var $li = $(
                '<li class="' + file.id + '"><i class="i-pic-close"></i><img id="' + file.id + '"></li>'
                ),
            $img = $li.find('img');

        $filePicker.before($li);
        count = $list.find('li').length - 1;
        // 创建缩略图
        uploader.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);

        $('#alreadyCount').html(count);
        $('#canCount').html(9 - count);
        if (count === 9) {
            $filePicker.css('display', 'none');
        }
    });
    // 当有文件添加进来的时候
    uploaderSend.on('fileQueued', function (file) {

        var count = $listSend.find('li').length - 1;
        if (count === 9) {
            return;
        }
        var $li = $(
                '<li class="' + file.id + '"><i class="i-pic-close-send"></i><img id="' + file.id + '"></li>'
                ),
            $img = $li.find('img');

        $filePickerSend.before($li);
        count = $listSend.find('li').length - 1;
        // 创建缩略图
        uploaderSend.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);

        $('#alreadyCountSend').html(count);
        $('#canCountSend').html(9 - count);
        if (count === 9) {
            $filePickerSend.css('display', 'none');
        }
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file) {
        var count = $list.find('li').length - 1;
        //$('#' + file.id).addClass('upload-state-done');
        var $i = $('<i class="i-pic-success"></i>');
        $('.' + file.id).append($i);
        uploader.removeFile(file);
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploaderSend.on('uploadSuccess', function (file) {
        var count = $listSend.find('li').length - 1;
        //$('#' + file.id).addClass('upload-state-done');
        var $i = $('<i class="i-pic-success"></i>');
        $('.' + file.id).append($i);
        uploaderSend.removeFile(file);
    });
    // 文件上传失败，现实上传出错。
    uploader.on('uploadError', function (file) {
        var $li = $('.' + file.id);
        var $i = $('<i class="i-pic-fail"></i>');
        $li.find('img').css({ opacity: 0.5 });
        $li.css({ backgroundColor: 'black' });
        $li.append($i);
    });
    // 文件上传失败，现实上传出错。
    uploaderSend.on('uploadError', function (file) {
        var $li = $('.' + file.id);
        var $i = $('<i class="i-pic-fail"></i>');
        $li.find('img').css({ opacity: 0.5 });
        $li.css({ backgroundColor: 'black' });
        $li.append($i);
    });
    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function (file) {
        $('.' + file.id).find('.progress').remove();
    });
    // 完成上传完了，成功或者失败，先删除进度条。
    uploaderSend.on('uploadComplete', function (file) {
        $('.' + file.id).find('.progress').remove();
    });
    //获取所有图片id
    $("#getImgId").click(function () {
        var div = $(".uploader-list >div");
        var imgIdList = [];
        div.each(function (index, el) {
            var imgId = $(el).find('img').attr('id');
            imgIdList.push(imgId);
        });
    });

    //
    $(".i-pic-close").live('click', function (e) {
        var count = 0;
        if ($oneOnly.length == 1) {
            count = $list.find('li').length - 2;
        } else {
            count = $list.find('li').length - 1;
        }
        $('#alreadyCount').html(count);
        $('#canCount').html(9 - count);
        $(e.target).parent().remove();
        if (count < 9) {
            $filePicker.css('display', 'block');
        }
        //e.stopPropagation();
    });
    $(".i-pic-close-send").live('click', function (e) {
        var count = $listSend.find('li').length - 1;
        $('#alreadyCountSend').html(count);
        $('#canCountSend').html(9 - count);
        $(e.target).parent().remove();
        if (count < 9) {
            $filePickerSend.css('display', 'block');
        }
        //e.stopPropagation();
    });
});